<!--
 * @Author: liu-tiezhu1 1471528799@qq.com
 * @Date: 2023-11-21 22:38:28
 * @LastEditors: liu-tiezhu1 1471528799@qq.com
 * @LastEditTime: 2023-11-24 09:50:31
 * @FilePath: \customer-relations\src\views\Message\Todo\tosochankan\leiXing\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
   <h2>SL合同类型</h2>

   <div>
      <h3 class="hulai">客户信息</h3>
      <div class="dahezi">
         <div class="kehu">
            <div>合同编号:<span>{{ props.data.advancePayment }}</span></div>
            <div>合同状态:<span>{{ props.data.contractStatus }}</span></div>
         </div>

         <div class="kehu">
            <div>合同名称:<span>{{ props.data.contractFile }}</span></div>
            <div>合同类型:<span>{{ props.data.contractType }}</span></div>
         </div>

         <div class="kehu">
            <div>客户名称:<span>{{ props.data.signer }}</span></div>
            <div>合同文件:<span>{{ props.data.contractName }}</span></div>
         </div>

         <div class="kehu">
            <div>合同金额:<span>{{ props.data.contractNumber }}</span></div>
            <div>关联产品:<span>{{ props.data.paymentMethod }}</span></div>
         </div>

      </div>
   </div>


   <div>
      <h3 class="hulai1">付款信息</h3>
      <div class="dahezi">
         <div class="kehu">
            <div>签订人:<span>{{ props.data.customerName }}</span></div>
            <div>付款方式:<span>{{ props.data.paymentMethod }}</span></div>
         </div>

         <div class="kehu">
            <div>签订时间:<span>{{ props.data.expireDate }}</span></div>
            <div>预付款:<span>{{ props.data.paymentMethod }}</span></div>
         </div>

         <div class="kehu">
            <div>到期时间:<span>{{ props.data.signDate }}</span></div>
         </div>
         <div class="kehuw">备注:<span>{{ props.data.note }}</span></div>
      </div>
   </div>
</template>

<script setup lang="ts">
interface IProps {
   data: {
      contractNumber: string;
      contractName: string;
      customerName: string;
      contractAmount: number;
      contractStatus: string;
      contractType: string;
      contractFile: string;
      relatedProduct: string;
      signer: string;
      signDate: string;
      expireDate: string;
      paymentMethod: string;
      advancePayment: number;
      note: string;
   };
}
// console.log(props.data);
const props = defineProps<IProps>()


</script>

<style lang="scss" scoped>
.hulai {
   margin-top: 20px;
}

.hulai1 {
   margin-top: 30px;
}

.kehu {
   width: 100%;
   margin-right: 40px;
   margin-top: 30px;
   display: flex;
   justify-content: space-between;
   // line-height: 20px;
}
.kehuw{
   margin-top: 20px;
   line-height: 20px;
}
</style>